<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-treeview.min.css"
          th:href="@{static/js/bootstrap/css/bootstrap-treeview.min.css}"
    >
    <script src="static/js/bootstrap/js/bootstrap-treeview.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.addtabs.css">
    <script src="static/js/bootstrap/js/bootstrap.addtabs.min.js"></script>
    <link rel="stylesheet" href="static//js/bootstrap/css/bootstrap-table.min.css">
    <script src="static/js/bootstrap/js/bootstrap-table.min.js"></script>
    <script src="static/js/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="static/js/bootstrap/js/bootbox.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="static/js/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="static/js/bootstrap-fileinput/js/locales/zh.js"></script>
    <link rel="stylesheet" href="static/js/bootstrap-fileinput/css/fileinput.css">

</head>
<body>

    <input id="upUpdatePicture_cyt" hidden th:value="${productId.productId}">

    <br>
    <br>
    <font size="5px" style="margin-left: 50%"><b>填写询图信息</b></font>

    <form class="form-inline" method="post" id="myForm_cyt" role="form">
        <input name="queryPictureId" hidden="hidden">
        <table class="table">
            <tr>
                <td style="background-color: #afd9ee" colspan="3">
                    <font size="3">*项目时间信息</font>
                </td>
            </tr>
            <tr>
                <td width="500px">开始时间：
                    <label class="radio-inline" style="margin-left: 80px">
                        <input type="radio" value="1" name="queryPictureStartDate">立即开始
                    </label>
                </td>
                <td>
                    <label class="radio-inline">
                        <input type="radio" id="zidingyi" value="2">自定义开始时间：
                    </label>
                    <input type="date" id="zidingyiText" class="form-control" name="queryPictureStartDate" style="margin-left: 25px">
                </td>

            </tr>
            <tr>
                <td colspan="3">截止日期：
                    <input type="date" class="form-control" onchange="yz_queryPictureEndDate()" id="queryPictureEndDate" name="queryPictureEndDate" style="margin-left: 80px">
                    <span style="color: red" id="span_queryPictureEndDate"></span>
                    <br>
                    <br>
                结束公布日期：
                    <input type="date" class="form-control" onchange="yz_queryPictureCutDate()" name="queryPictureCutDate" id="queryPictureCutDate" style="margin-left: 50px">
                    <span style="color: red" id="span_queryPictureCutDate"></span>
                </td>
            </tr>
            <tr>
                <td style="background-color: #afd9ee" colspan="3">
                    <font size="3">*采购商信息</font>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="form-group">
                        联系人：<input type="text" onkeyup="yz_contacts()" name="contacts" id="contacts" class="form-control" placeholder="请输入联系人名称">
                        <span style="color: red" id="span_contacts"></span>
                    </div>
                    <br>
                    <br>
                    邮箱：<input type="text" name="contactsEmail" id="contactsEmail" onkeyup="yz_contactsEmail()" style="margin-left: 15px" class="form-control" placeholder="请输入邮箱">
                    <span style="color: red" id="span_contactsEmail"></span>
                </td>
                <td>
                    <div class="form-group">
                        联系电话：<input type="text" name="contactsPhone" id="contactsPhone" onkeyup="yz_contactsPhone()" class="form-control" placeholder="请输入联系电话">
                        <span style="color: red" id="span_contactsPhone"></span>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="background-color: #afd9ee" colspan="3">
                    <font size="3">*备注信息</font>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="form-group">
                        <textarea name="contactsRemark" id="contactsRemark" placeholder="如有其他要求，请在此处说明" class="form-control" rows="10" cols="100%"></textarea>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="background-color: #afd9ee" colspan="3">
                    <font size="3">附件</font>
                </td>
            </tr>
            <tr>
                <td colspan="3">
                        <input type="file" id="file‐Portrait" name="contactsAccessory"/>
                        <input type="hidden" id="file" name="contactsAccessory"/>
                </td>
            </tr>
        </table>
        <br><br>
        <center>
            <button type="button" onclick="addPictureRedis()" class="btn btn-primary">保存</button>
            <button type="button" class="btn btn-primary" onclick="lastStep()" style="margin-left: 50px">上一步</button>
            <button type="button" onclick="return addPicture()" class="btn btn-primary" style="margin-left: 50px">确认发布询图单</button>
        </center>
    </form>

    <br>
    <br>
</body>

<script>

    $(function(){
        selByPictureId_cyt();
    })

    function selByPictureId_cyt(){
        var productId = $("#upUpdatePicture_cyt").val()
        $.ajax({
            url: 'selByPictureId_cyt?productId='+productId,
            success: function (data) {
                $("input[name='queryPictureId']").val(data.queryPictureId);
                $("input[name='queryPictureStartDate']").val(data.queryPictureStartDate);
                $("input[name='queryPictureCutDate']").val(data.queryPictureCutDate);
                $("input[name='queryPictureEndDate']").val(data.queryPictureEndDate);
                $("input[name='contacts']").val(data.contacts);
                $("input[name='contactsPhone']").val(data.contactsPhone);
                $("input[name='contactsEmail']").val(data.contactsEmail);
                $("#contactsRemark").val(data.contactsRemark);
                $("input[name='contactsAccessory']").val(data.contactsAccessory);
                $("input[name='queryPictureRequirementType']").val(data.queryPictureRequirementType);
                $("input[name='queryPictureState']").val(data.queryPictureState);
            }
        })
    }

    /* 验证结束公布时间 */
    function yz_queryPictureCutDate(){
        var queryPictureCutDate = $("#queryPictureCutDate").val()
        var span = $("#span_queryPictureCutDate")
        if (queryPictureCutDate != "") {
            span.text("")
            return true
        }else{
            span.text("不能为空")
            return false
        }
    }

    <!--  验证截止时间  -->
    function yz_queryPictureEndDate(){
        var queryPictureEndDate = $("#queryPictureEndDate").val()
        var span = $("#span_queryPictureEndDate")
        if (queryPictureEndDate != "") {
            span.text("")
            return true
        }else{
            span.text("不能为空")
            return false
        }
    }

    <!--  验证邮箱  -->
    function yz_contactsEmail(){
        var contactsEmail = $("#contactsEmail").val()
        var span = $("#span_contactsEmail")
        var reg = /^[0-9a-zA-Z_]{1,}@qq.com|@163.com|sina.com$/
        if (reg.test(contactsEmail)){
            span.text("")
            return true
        }else{
            span.text("格式不正确")
            return false
        }
    }

    /* 验证手机号 */
    function yz_contactsPhone(){
        var contactsPhone = $("#contactsPhone").val()
        var span = $("#span_contactsPhone")
        var reg = /^[0-9]{11}$/
        if (reg.test(contactsPhone)){
            span.text("")
            return true
        }else{
            span.text("请输入11位数字")
            return false
        }
    }

    /* 验证联系人 */
    function yz_contacts(){
        var contacts = $("#contacts").val()
        var span = $("#span_contacts")
        var reg = /^[\u4e00-\u9fa5a-zA-Z]{1,}$/
        if (reg.test(contacts)){
            span.text("")
            return true
        }else{
            span.text("请输入名称")
            return false
        }
    }

    /* 图片上传 */
    $('#file‐Portrait').fileinput({
        language: 'zh', //设置语言
        uploadUrl: "addPictureImg_cyt",
        allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀,
        maxFileCount: 100,
        enctype: 'multipart/form‐data',
        showUpload: true, //是否显示上传按钮
        showCaption: false,//是否显示标题
        browseClass: "btn btn‐primary", //按钮样式
        previewFileIcon: "<i class='glyphicon glyphicon‐king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"

    })

    //导入文件上传完成之后的事件
    $("#file‐Portrait").on("fileuploaded", function (event, data, previewId, index) {
        console.log(data);
        console.log(data.response.contactsAccessory)
        $("#file").val(data.response.contactsAccessory);
    });

    //上一步操作
    function lastStep(){
        location.href="findCustomized.html"
    }

    /* 总验证 true成功新增 false 进行拦截 */
    function addPicture(){
        if (yz_contacts() & yz_contactsPhone() & yz_contactsEmail() & yz_queryPictureEndDate() & yz_queryPictureCutDate()){
            $.ajax({
                url:"addPicturefindImg_cyt",
                data:$("#myForm_cyt").serialize(),
                dateType:"post",
                success:function(data){
                    alert("成功")
                    location.href="ok.html"
                }
            })
            return  true;
        }
            return  false;
    }

</script>

</html>